<template>
  <div id="noteDetailPage">
    <a-row :gutter="[16, 16]" class="note-container">
      <!-- 笔记展示区 -->
      <a-col :span="24" class="note-content">
        <a-card title="笔记详情">
          <template #extra>
            <a-button v-if="canEdit" type="primary" @click="doEdit">
              <template #icon>
                <EditOutlined />
              </template>
              编辑笔记
            </a-button>
            <a-button type="primary" @click="handleShare" style="margin-left: 8px">
              <template #icon>
                <ShareAltOutlined />
              </template>
              分享笔记
            </a-button>
            <a-button type="primary" @click="handleExport" style="margin-left: 8px">
              <template #icon>
                <DownloadOutlined />
              </template>
              导出笔记
            </a-button>
            <a-button
              v-if="canEdit"
              type="primary"
              danger
              @click="handleDelete"
              style="margin-left: 8px"
            >
              <template #icon>
                <DeleteOutlined />
              </template>
              删除笔记
            </a-button>
          </template>

          <div class="note-detail">
            <!-- 封面图片 -->
            <div class="cover-image" v-if="note.cover">
              <img :src="note.cover" :alt="note.title" />
            </div>

            <!-- 标题 -->
            <h1 class="note-title">{{ note.title }}</h1>
            <!-- 作者信息 -->
            <div class="user-info">
              <div class="user-meta-left">
                <a-avatar :size="40" :src="note.user?.userAvatar || '/avatar.png'" />
                <div class="user-meta">
                  <div class="username">{{ note.user?.userName }}</div>
                  <div class="edit-time">
                    编辑于 {{ dayjs(note.editTime).format('YYYY-MM-DD HH:mm:ss') }}
                  </div>
                </div>
              </div>
              <div class="user-meta-right">
                <a-space>
                  <div v-if="isAuthor && noteVisibility === 1" class="review-status">
                    <span>审核状态：</span>
                    <a-tag :color="getReviewStatusColor(reviewStatus)"
                      >{{ getReviewStatusText }}
                    </a-tag>
                  </div>
                  <div v-if="isAuthor" class="visibility-switch">
                    <span class="visibility-label">{{
                      noteVisibility === 1 ? '公开' : '仅自己可见'
                    }}</span>
                    <a-switch
                      :checked="noteVisibility === 1"
                      @change="handleVisibilityChange"
                      :checkedChildren="'公开'"
                      :unCheckedChildren="'私密'"
                    />
                  </div>
                </a-space>
              </div>
            </div>

            <!-- 主题选择器 -->
            <div class="theme-selector">
              <span>选择主题：</span>
              <a-select
                v-model:value="currentTheme"
                style="width: 200px"
                @change="handleThemeChange"
              >
                <a-select-option v-for="theme in themeList" :key="theme.name" :value="theme.name">
                  {{ theme.name }}
                </a-select-option>
              </a-select>
            </div>

            <!-- 内容详情 -->
            <div class="content-preview">
              <ViewerComponent :value="note.content || ''" :plugins="plugins" />
            </div>

            <!-- 分类和标签信息 -->
            <div class="meta-section">
              <div class="meta-item">
                <span class="meta-label">所属分类：</span>
                <a-tag color="green">{{ getCategoryName(note.categoryId) }}</a-tag>
              </div>
              <div class="meta-item">
                <span class="meta-label">文章标签：</span>
                <a-space wrap>
                  <a-tag v-for="tag in note.tagList" :key="tag.id">
                    {{ tag.tagName }}
                  </a-tag>
                </a-space>
              </div>
            </div>
          </div>
        </a-card>

        <!-- 评论系统 -->
        <a-card class="comments-section" :bordered="false">
          <template #title>
            <div class="comments-header">
              <span class="comments-title">评论 {{ commentTotal }}</span>
              <!-- <a-button type="primary" @click="handleCommentClick"> 写评论</a-button>-->
            </div>
          </template>

          <!-- 评论输入框 -->
          <div class="comment-input">
            <div class="input-wrapper">
              <a-avatar :size="40" :src="loginUserStore.loginUser.userAvatar || '/avatar.png'" />
              <a-textarea
                v-model:value="commentContent"
                :rows="1"
                :auto-size="{ minRows: 1, maxRows: 6 }"
                placeholder="写下你的评论..."
                :maxLength="1000"
                @focus="showCommentActions = true"
                @blur="handleCommentBlur"
              />
            </div>
            <div class="comment-actions" v-if="showCommentActions">
              <a-space>
                <a-button type="primary" @click="submitComment" :loading="submitting">
                  发表评论
                </a-button>
              </a-space>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <template v-if="comments.length > 0">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-user">
                  <a-avatar :size="40" :src="comment.user?.userAvatar || '/avatar.png'" />
                  <div class="comment-meta">
                    <span class="username">{{ comment.user?.userName }}</span>
                    <span class="time">{{
                      dayjs(comment.createTime).format('YYYY-MM-DD HH:mm')
                    }}</span>
                  </div>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-actions">
                  <div class="left-actions">
                    <a-button type="link" @click="showReplyInput(comment)">回复</a-button>
                  </div>
                  <div class="right-actions">
                    <a-button
                      v-if="isCommentOwner(comment)"
                      type="link"
                      danger
                      @click="handleDeleteComment(comment)"
                    >
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                      删除
                    </a-button>
                  </div>
                </div>

                <!-- 回复输入框 -->
                <div class="reply-input" v-if="activeReplyId === comment.id">
                  <div class="input-wrapper">
                    <a-avatar
                      :size="32"
                      :src="loginUserStore.loginUser.userAvatar || '/avatar.png'"
                    />
                    <a-textarea
                      v-model:value="replyContent"
                      :rows="1"
                      :auto-size="{ minRows: 1, maxRows: 6 }"
                      :placeholder="'回复 ' + comment.user?.userName"
                      :maxLength="1000"
                      @blur="handleReplyBlur"
                      :id="'reply-textarea-' + comment.id"
                    />
                  </div>
                  <div class="reply-actions">
                    <a-space>
                      <a-button
                        size="small"
                        type="primary"
                        @click="submitReply(comment)"
                        :loading="submitting"
                      >
                        发表回复
                      </a-button>
                    </a-space>
                  </div>
                </div>

                <!-- 子评论 -->
                <div
                  v-if="comment.childComments && comment.childComments.length > 0"
                  class="child-comments"
                >
                  <div
                    v-for="child in comment.childComments"
                    :key="child.id"
                    class="child-comment-item"
                  >
                    <div class="comment-user">
                      <a-avatar :size="32" :src="child.user?.userAvatar || '/avatar.png'" />
                      <div class="comment-meta">
                        <span class="username">{{ child.user?.userName }}</span>
                        <span class="time">{{
                          dayjs(child.createTime).format('YYYY-MM-DD HH:mm')
                        }}</span>
                      </div>
                    </div>
                    <div class="comment-content">{{ child.content }}</div>
                    <div class="comment-actions">
                      <div class="right-actions">
                        <a-button
                          v-if="isCommentOwner(child)"
                          type="link"
                          danger
                          @click="handleDeleteComment(child)"
                        >
                          <template #icon>
                            <DeleteOutlined />
                          </template>
                          删除
                        </a-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <a-empty v-else description="暂无评论" />
          </div>

          <!-- 分页 -->
          <div class="pagination" v-if="commentTotal > 0">
            <a-pagination
              v-model:current="current"
              :total="commentTotal"
              :pageSize="pageSize"
              @change="handlePageChange"
              show-quick-jumper
            />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { computed, createVNode, nextTick, onMounted, ref, watch } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import router from '@/router'
import {
  deleteNoteUsingPost,
  editNoteVisibilityUsingPost,
  getNoteReviewStatusByIdUsingGet,
  getNoteVisibilityByIdUsingGet,
  getNoteVoByIdUsingGet,
  listNoteTagsCategoryUsingGet,
} from '@/api/notesController'
import {
  DeleteOutlined,
  DownloadOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  ShareAltOutlined,
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import { Viewer as ViewerComponent } from '@bytemd/vue-next'
import gfm from '@bytemd/plugin-gfm'
import highlightssr from '@bytemd/plugin-highlight-ssr'
import highlight from '@bytemd/plugin-highlight'
import breaks from '@bytemd/plugin-breaks'
import footnotes from '@bytemd/plugin-footnotes'
import frontmatter from '@bytemd/plugin-frontmatter'
import gemoji from '@bytemd/plugin-gemoji'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import theme from 'bytemd-plugin-theme'
import 'bytemd/dist/index.css'
import { currentTheme, handleThemeChange, themeList } from '@/utils/themeManager'
import {
  addCommentsUsingPost,
  deleteCommentsUsingPost,
  listCommentsVoByPageUsingPost,
} from '@/api/commentsController'

const props = defineProps<{
  id: string | number
}>()

const note = ref<API.NotesVO>({})
const categoryList = ref<API.Categories[]>([])
const noteVisibility = ref<number>(0)
const reviewStatus = ref<number>(0)

// 获取分类名称
const getCategoryName = (categoryId: number | undefined) => {
  if (!categoryId) return '默认'
  const category = categoryList.value.find((cat) => cat.id === categoryId)
  return category ? category.categoryName : '默认'
}

// 获取分类列表
const fetchCategories = async () => {
  const res = await listNoteTagsCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    categoryList.value = res.data.data.categoriesList ?? []
  } else {
    message.error('获取分类列表失败，' + res.data.message)
  }
}

// 获取审核状态文本
const getReviewStatusText = computed(() => {
  const statusMap = {
    0: '无需审核',
    1: '待审核',
    2: '已通过',
    3: '已拒绝',
  }
  return statusMap[reviewStatus.value] || '仅自己可见'
})

// 获取审核状态颜色
const getReviewStatusColor = (status?: number) => {
  const colorMap: Record<number, string> = {
    0: 'blue',
    1: 'warning',
    2: 'success',
    3: 'error',
  }
  return colorMap[status ?? 0] ?? 'blue'
}

// 获取笔记详情
const fetchNoteDetail = async () => {
  try {
    const res = await getNoteVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      note.value = res.data.data
      // 获取可见性状态
      const visibilityRes = await getNoteVisibilityByIdUsingGet({
        id: props.id,
      })
      if (visibilityRes.data.code === 0) {
        noteVisibility.value = visibilityRes.data.data
        // 如果是公开的，获取审核状态
        if (noteVisibility.value === 1) {
          const reviewRes = await getNoteReviewStatusByIdUsingGet({
            id: props.id,
          })
          if (reviewRes.data.code === 0) {
            reviewStatus.value = reviewRes.data.data
          }
        }
      }
    } else if (res.data.code === 40101) {
      // 无权限访问，重定向到 noAuth 页面
      router.push('/noAuth')
      return
    } else {
      message.error('获取笔记详情失败，' + res.data.message)
    }
  } catch (e: any) {
    message.error('获取笔记详情失败：' + e.message)
  }
}

onMounted(async () => {
  // 并行获取分类和笔记详情
  await Promise.all([fetchCategories(), fetchNoteDetail()])
})

const loginUserStore = useLoginUserStore()
// 是否具有编辑权限
const canEdit = computed(() => {
  const loginUser = loginUserStore.loginUser
  // 未登录不可编辑
  if (!loginUser.id) {
    return false
  }
  // 仅本人可编辑
  const user = note.value.user || {}
  return loginUser.id === user.id
})

// 编辑
const doEdit = () => {
  router.push('/addNote?id=' + note.value.id)
}

// ByteMD 插件
const plugins = [
  gfm(),
  highlight(),
  highlightssr(),
  breaks(),
  frontmatter(),
  footnotes(),
  gemoji(),
  theme(),
  mediumZoom(),
]

// 监听主题变化
watch(currentTheme, (newTheme) => {
  handleThemeChange(newTheme)
})

// 初始化主题
onMounted(() => {
  handleThemeChange(currentTheme.value)
})

// 评论相关的状态
const commentContent = ref('')
const replyContent = ref('')
const comments = ref<API.CommentsVO[]>([])
const commentTotal = ref(0)
const current = ref(1)
const pageSize = ref(10)
const submitting = ref(false)
const showCommentActions = ref(false)
const activeReplyId = ref<number | null>(null)

// 获取评论列表
const fetchComments = async () => {
  try {
    const res = await listCommentsVoByPageUsingPost({
      noteId: props.id,
      current: current.value,
      pageSize: pageSize.value,
      sortField: 'create_time',
      sortOrder: 'descend',
    })
    if (res.data.code === 0 && res.data.data) {
      comments.value = res.data.data.records || []
      commentTotal.value = res.data.data.total || 0
    } else if (res.data.code === 40101) {
      // 无权限访问，重定向到 noAuth 页面
      router.push('/noAuth')
      return
    } else {
      message.error('获取评论失败：' + res.data.message)
    }
  } catch (error: any) {
    message.error('获取评论失败：' + error.message)
  }
}

// 显示回复输入框
const showReplyInput = (comment: API.CommentsVO) => {
  activeReplyId.value = comment.id || null
  replyContent.value = ''

  // 使用多个 nextTick 确保 DOM 完全更新
  nextTick(() => {
    nextTick(() => {
      const textarea = document.querySelector(
        `.reply-input .ant-input-textarea textarea`,
      ) as HTMLTextAreaElement
      if (textarea) {
        textarea.focus()
      } else {
        // 如果第一次尝试失败，再次尝试
        setTimeout(() => {
          const retryTextarea = document.querySelector(
            `.reply-input .ant-input-textarea textarea`,
          ) as HTMLTextAreaElement
          if (retryTextarea) {
            retryTextarea.focus()
          }
        }, 100)
      }
    })
  })
}

// 提交回复
const submitReply = async (parentComment: API.CommentsVO) => {
  if (!replyContent.value.trim()) {
    message.warning('请输入回复内容')
    return
  }

  submitting.value = true
  try {
    const res = await addCommentsUsingPost({
      content: replyContent.value.trim(),
      noteId: props.id,
      parentId: parentComment.id,
    })
    if (res.data.code === 0) {
      message.success('回复成功')
      replyContent.value = ''
      activeReplyId.value = null
      // 重新加载评论列表
      await fetchComments()
    } else {
      message.error('回复失败：' + res.data.message)
    }
  } catch (error: any) {
    message.error('回复失败：' + error.message)
  } finally {
    submitting.value = false
  }
}

// 提交评论
const submitComment = async () => {
  if (!commentContent.value.trim()) {
    message.warning('请输入评论内容')
    return
  }

  submitting.value = true
  try {
    const res = await addCommentsUsingPost({
      content: commentContent.value.trim(),
      noteId: props.id,
    })
    if (res.data.code === 0) {
      message.success('评论成功')
      commentContent.value = ''
      // 重新加载评论列表
      current.value = 1
      await fetchComments()
    } else {
      message.error('评论失败：' + res.data.message)
    }
  } catch (error: any) {
    message.error('评论失败：' + error.message)
  } finally {
    submitting.value = false
  }
}

// 页码改变
const handlePageChange = (page: number) => {
  current.value = page
  fetchComments()
}

// 初始化时加载评论
onMounted(() => {
  fetchComments()
})

// 处理评论框失焦
const handleCommentBlur = (e: FocusEvent) => {
  // 使用 setTimeout 确保点击按钮事件在失焦事件之后执行
  setTimeout(() => {
    // 检查点击的元素是否是提交按钮
    const activeElement = document.activeElement
    const isClickingSubmit = activeElement?.closest('.comment-actions')
    if (!isClickingSubmit) {
      showCommentActions.value = false
    }
  }, 200)
}

// 处理回复框失焦
const handleReplyBlur = (e: FocusEvent) => {
  // 使用 setTimeout 确保点击按钮事件在失焦事件之后执行
  setTimeout(() => {
    // 检查点击的元素是否是提交按钮
    const activeElement = document.activeElement
    const isClickingSubmit = activeElement?.closest('.reply-actions')
    if (!isClickingSubmit) {
      activeReplyId.value = null
      replyContent.value = ''
    }
  }, 200)
}

// 检查评论是否属于当前用户
const isCommentOwner = (comment: API.CommentsVO) => {
  return loginUserStore.loginUser.id === comment.userId
}

// 删除评论
const handleDeleteComment = async (comment: API.CommentsVO) => {
  Modal.confirm({
    title: '确认删除',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要删除这条评论吗？',
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      try {
        const res = await deleteCommentsUsingPost({
          id: comment.id,
        })
        if (res.data.code === 0) {
          message.success('删除成功')
          // 重新加载评论列表
          await fetchComments()
        } else {
          message.error('删除失败：' + res.data.message)
        }
      } catch (error: any) {
        message.error('删除失败：' + error.message)
      }
    },
  })
}

// 点击回复按钮时自动聚焦到评论框
const handleCommentClick = () => {
  showCommentActions.value = true
  nextTick(() => {
    const textarea = document.querySelector('.comment-input textarea') as HTMLTextAreaElement
    if (textarea) {
      textarea.focus()
    }
  })
}

// 处理分享
const handleShare = async () => {
  try {
    // 检查笔记可见性
    const visibilityRes = await getNoteVisibilityByIdUsingGet({
      id: props.id,
    })

    if (visibilityRes.data.code === 0) {
      const visibility = visibilityRes.data.data
      if (visibility === 1) {
        // 公开笔记，检查审核状态
        const reviewRes = await getNoteReviewStatusByIdUsingGet({
          id: props.id,
        })

        if (reviewRes.data.code === 0) {
          const reviewStatus = reviewRes.data.data
          if (reviewStatus === 0 || reviewStatus === 2) {
            // 无需审核或已通过审核，可以分享
            const url = window.location.href
            try {
              // 优先使用现代 Clipboard API
              if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(url)
                message.success('链接已复制到剪贴板，可以分享给好友了')
              } else {
                // 回退到传统方法
                const textArea = document.createElement('textarea')
                textArea.value = url
                textArea.style.position = 'fixed'
                textArea.style.left = '-999999px'
                textArea.style.top = '-999999px'
                document.body.appendChild(textArea)
                textArea.focus()
                textArea.select()

                try {
                  document.execCommand('copy')
                  textArea.remove()
                  message.success('链接已复制到剪贴板，可以分享给好友了')
                } catch (err) {
                  textArea.remove()
                  Modal.info({
                    title: '分享链接',
                    content: `
                      <div>
                        <p>请手动复制以下链接：</p>
                        <p style="word-break: break-all;">${url}</p>
                      </div>
                    `,
                    okText: '确定',
                  })
                }
              }
            } catch (err) {
              // 如果复制失败，显示链接让用户手动复制
              Modal.info({
                title: '分享链接',
                content: `
                  <div>
                    <p>请手动复制以下链接：</p>
                    <p style="word-break: break-all;">${url}</p>
                  </div>
                `,
                okText: '确定',
              })
            }
          } else if (reviewStatus === 1) {
            message.warning('笔记正在审核中，暂时无法分享')
          } else if (reviewStatus === 3) {
            message.error('笔记未通过审核，无法分享')
          }
        } else {
          message.error('获取笔记审核状态失败：' + reviewRes.data.message)
        }
      } else {
        // 私密笔记，询问是否设为公开
        Modal.confirm({
          title: '设置笔记可见性',
          icon: createVNode(ExclamationCircleOutlined),
          content: '当前笔记处于仅自己可见状态，需要设置为公开才能分享。是否将笔记设置为公开？',
          okText: '确认',
          cancelText: '取消',
          async onOk() {
            const editRes = await editNoteVisibilityUsingPost({
              id: props.id,
              visibility: 1,
            })
            if (editRes.data.code === 0) {
              message.success('已提交公开申请，待管理员审核通过后即可分享给好友')
              // 更新可见性状态
              noteVisibility.value = 1
              // 获取最新的审核状态
              const reviewRes = await getNoteReviewStatusByIdUsingGet({
                id: props.id,
              })
              if (reviewRes.data.code === 0) {
                reviewStatus.value = reviewRes.data.data
              }
            } else {
              message.error('设置失败：' + editRes.data.message)
            }
          },
        })
      }
    } else {
      message.error('获取笔记可见性失败：' + visibilityRes.data.message)
    }
  } catch (error: any) {
    message.error('操作失败：' + error.message)
  }
}

// 是否为作者
const isAuthor = computed(() => {
  const loginUser = loginUserStore.loginUser
  const user = note.value.user
  return loginUser.id && user && loginUser.id === user.id
})

// 处理可见性变更
const handleVisibilityChange = async (checked: boolean) => {
  try {
    const editRes = await editNoteVisibilityUsingPost({
      id: props.id,
      visibility: checked ? 1 : 0,
    })
    if (editRes.data.code === 0) {
      message.success(
        checked ? '已提交公开申请，待管理员审核通过后即可分享给好友' : '笔记已设为私密',
      )
      noteVisibility.value = checked ? 1 : 0
      // 如果切换为公开，重新获取审核状态
      if (checked) {
        const reviewRes = await getNoteReviewStatusByIdUsingGet({
          id: props.id,
        })
        if (reviewRes.data.code === 0) {
          reviewStatus.value = reviewRes.data.data
        }
      }
    } else {
      message.error('设置失败：' + editRes.data.message)
    }
  } catch (error: any) {
    message.error('操作失败：' + error.message)
  }
}

// 处理笔记导出
const handleExport = () => {
  try {
    // 创建一个 Blob 对象
    const blob = new Blob([note.value.content || ''], { type: 'text/markdown;charset=utf-8' })

    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${note.value.title || '笔记'}.md`

    // 触发下载
    document.body.appendChild(link)
    link.click()

    // 清理
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    message.success('笔记导出成功')
  } catch (error: any) {
    message.error('导出失败：' + error.message)
  }
}

// 处理笔记删除
const handleDelete = () => {
  Modal.confirm({
    title: '确认删除',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要删除这篇笔记吗？删除后将无法恢复。',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      try {
        const res = await deleteNoteUsingPost({
          id: props.id,
        })
        if (res.data.code === 0) {
          message.success('删除成功')
          // 删除成功后返回笔记列表页
          await router.push('/')
        } else {
          message.error('删除失败：' + res.data.message)
        }
      } catch (error: any) {
        message.error('删除失败：' + error.message)
      }
    },
  })
}
</script>

<style scoped>
#noteDetailPage {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;

  .note-container {
    position: relative;
    transition: all 0.3s ease;
  }

  .note-content {
    transition: all 0.3s ease;

    .note-detail {
      .note-title {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 24px;
        color: rgba(0, 0, 0, 0.85);
      }

      .user-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 24px;
        padding: 16px;
        background: #fafafa;
        border-radius: 8px;

        .user-meta-left {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .user-meta {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .username {
            font-weight: 500;
            font-size: 16px;
          }

          .edit-time {
            color: rgba(0, 0, 0, 0.45);
            font-size: 12px;
          }
        }

        .user-meta-right {
          display: flex;
          align-items: center;
          gap: 16px;

          .review-status {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
          }

          .visibility-switch {
            display: flex;
            align-items: center;
            gap: 8px;

            .visibility-label {
              color: rgba(0, 0, 0, 0.65);
              font-size: 14px;
            }
          }
        }
      }

      .cover-image {
        margin: 24px 0;
        text-align: center;

        img {
          max-width: 100%;
          max-height: 400px;
          object-fit: contain;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }

      .theme-selector {
        /* 居右显示 */
        text-align: center;
        padding-left: 1000px;
        margin: 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;

        span {
          color: rgba(0, 0, 0, 0.65);
        }
      }

      .meta-section {
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid #f0f0f0;

        .meta-item {
          margin-bottom: 16px;
          display: flex;
          align-items: center;

          .meta-label {
            color: rgba(0, 0, 0, 0.65);
            margin-right: 12px;
            font-size: 14px;
          }
        }
      }

      .content-preview {
        padding: 24px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
    }
  }

  .comments-section {
    margin-top: 24px;

    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .comments-title {
      font-size: 18px;
      font-weight: 500;
    }

    .comment-input {
      margin-bottom: 24px;

      .input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 8px;

        :deep(.ant-input) {
          border-radius: 8px;
          resize: none;
          transition: all 0.3s;

          &:focus {
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
          }
        }
      }

      .comment-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
        padding-left: 52px;
      }
    }

    .comments-list {
      .comment-item {
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .comment-user {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;

          .comment-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .username {
              font-weight: 500;
              font-size: 14px;
            }

            .time {
              color: rgba(0, 0, 0, 0.45);
              font-size: 12px;
            }
          }
        }

        .comment-content {
          margin-left: 52px;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 1.6;
        }

        .comment-actions {
          margin-left: 52px;
          margin-top: 4px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left-actions {
            display: flex;
            gap: 8px;
          }

          .right-actions {
            margin-left: auto;
          }
        }

        .reply-input {
          margin-left: 52px;
          margin-top: 12px;

          .input-wrapper {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            margin-bottom: 8px;

            :deep(.ant-input) {
              border-radius: 8px;
              resize: none;
              font-size: 14px;

              &:focus {
                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
              }
            }
          }

          .reply-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
            padding-left: 40px;
          }
        }

        .child-comments {
          margin-left: 52px;
          margin-top: 16px;
          padding: 16px;
          background: #fafafa;
          border-radius: 4px;

          .child-comment-item {
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;

            &:last-child {
              border-bottom: none;
            }

            .comment-content {
              margin-left: 44px;
            }

            .comment-actions {
              margin-left: 44px;
              margin-top: 4px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .right-actions {
                margin-left: auto;
              }
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 24px;
      text-align: right;
    }
  }
}

/* 移除原有的状态标签样式 */
.status-tag {
  &.unnecessary,
  &.pending,
  &.approved,
  &.rejected {
    color: inherit;
  }
}
</style>
